<template>
  <div class="filterContainer" ref="filterContainerDom">
    <div class="filterTitle">
      <div class="filterItem" @click="showLayerList = !showLayerList">
        <div class="itemIcon"><el-icon><Coin /></el-icon></div>
        <div class="itemTitle">过滤图层</div>
        <div class="itemIcon"><el-icon><DArrowRight /></el-icon></div>
      </div>
      <div class="filterItem" @click="delectEvt">
        <div class="itemIcon"><el-icon><Delete /></el-icon></div>
        <div class="itemTitle">删除标绘</div>
      </div>
      <div class="filterItem" @click="closeDialog">
        <div class="itemIcon"><el-icon><CloseBold /></el-icon></div>
        <div class="itemTitle">关闭弹窗</div>
      </div>
    </div>
    <div class="layerContainer" v-if="showLayerList">
      <div class="sub-item" v-for="subItem in openLayerList" :key="subItem.id">
        <div class="sub-item-label" />
        <div class="sub-item-name" v-text="subItem.name" :title="subItem.name" />
        <div class="normal" :class="subItem.checkState ? 'checked' : 'unChecked'" @click="itemChecked(subItem)">
          <el-icon v-if="subItem.checkState"><Select /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Delete, Select, CloseBold } from '@element-plus/icons'
import { computed, ref, toRaw, watch } from 'vue'
import { queryDrawConfig, updateDraw } from '@/api/mapData'
const emit = defineEmits(['delectDraw', 'selectedLayers', 'closeDialog'])
const openLayerList = ref([] as any) // 已开启的图层筛选列表
const showLayerList = ref(false) // 是否显示图层筛选弹窗
const filterContainerDom = ref() // 绑定dom
const props = defineProps({
  layerListData: {
    type: Array,
    default: () => []
  },
  drawData: {
    type: Array,
    default: () => []
  }
})
const layerListData:any = computed(() => props.layerListData)
const _drawData:any = computed(() => props.drawData)
// 获取图层列表数据
const getMapLayerData = async () => {
  openLayerList.value = []
  const drawData = toRaw(_drawData.value)
  const drawConfigList:any = []
  if (drawData && drawData.length > 0) {
    if (drawData[1].attributes && drawData[1].attributes.id) {
      const res = await queryDrawConfig({ drawId: drawData[1].attributes.id })
      drawConfigList.push(...res)
    }
  }
  layerListData.value.forEach((item:any) => {
    const openLayer = ('visible' in item) ? item.visible : (!!Number(item.isShow) || false)
    if (openLayer) {
      let isSelected = false
      if (drawConfigList && drawConfigList.length > 0) {
        drawConfigList.forEach((element:any) => {
          if (element.elementType === item.elementType) {
            isSelected = true
          }
        })
      }
      if (isSelected) {
        item.checkState = true
      } else {
        item.checkState = false
      }
      item.name = item.elementName
      openLayerList.value.push(item)
    }
  })
  const checkedLayers:any = []
  const unCheckedLayers:any = []
  openLayerList.value.forEach((element:any) => {
    if (element.checkState) {
      checkedLayers.push(element)
    } else {
      unCheckedLayers.push(element)
    }
  })
  if (checkedLayers.length !== 0) {
    emit('selectedLayers', checkedLayers, true)
    emit('selectedLayers', unCheckedLayers, false)
  }
}
getMapLayerData()
watch(layerListData, () => {
  getMapLayerData()
})
watch(_drawData, () => {
  getMapLayerData()
})
// 删除标绘图层
const delectEvt = () => {
  const unCheckedLayers:any = []
  openLayerList.value.forEach((element:any) => {
    if (!element.checkState) {
      unCheckedLayers.push(element)
    }
  })
  emit('delectDraw', unCheckedLayers)
}

// 关闭弹窗
const closeDialog = () => {
  emit('closeDialog')
}
// 选中对应图层
const itemChecked = (item:any) => {
  item.checkState = !item.checkState
  const drawData = toRaw(_drawData.value)
  if (item.checkState) {
    const params = {
      drawPlanId: drawData[1].attributes.id,
      elementId: item.elementId,
      isShow: 1
    }
    updateDraw(params)
  } else {
    const params = {
      drawPlanId: drawData[1].attributes.id,
      elementId: item.elementId,
      isShow: 0
    }
    updateDraw(params)
  }
  const checkedLayers:any = []
  const unCheckedLayers:any = []
  openLayerList.value.forEach((element:any) => {
    if (element.checkState) {
      checkedLayers.push(element)
    } else {
      unCheckedLayers.push(element)
    }
  })
  emit('selectedLayers', checkedLayers, true)
  emit('selectedLayers', unCheckedLayers, false)
}
defineExpose({
  filterContainerDom
})
</script>

<style lang="scss" scoped>
.filterContainer{
  position: absolute;
  color: white;
  // background: #272d39;
  display: flex;
  .filterTitle{
    position: relative;
    width: max-content;
  }
  .filterItem{
    background: #272d39;
    position: relative;
    display: flex;
    height: 0.4rem;

    line-height: 0.4rem;
    cursor: pointer;
    user-select: none;
    padding: 0.1rem;
    .itemTitle{
      margin: auto 0.1rem;
    }
    .itemIcon{
      i{
        transform: translateY(-0.02rem);
      }
    }
  }
  .filterItem:hover{
    background: black;
  }
  .layerContainer{
    position: relative;
    max-height: 4rem;
    overflow-y: auto;
    margin-left: 0.1rem;
    background: #272d39;
    height: max-content;
    .sub-item {
        height: 32px;
        display: flex;
        align-items: center;
        margin-top: 6px;
        margin-left: 2px;

        .sub-item-label {
          width: 3px;
          height: 100%;
          border-radius: 0px 3px 3px 0px;
          background: #E6A23C;
        }

        .sub-item-name {
          user-select: none;
          font-size: 14px;
          font-weight: 500;
          line-height: 21px;
          /* 纯白 */
          color: #FFFFFF;
          margin-left: 0.15rem;
          margin-right: 0.1rem;
        }
      }
    .normal {
        width: 16px;
        height: 16px;
        margin: auto 14px auto auto;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
        cursor: pointer;
      }

      .checked {
        background-color: #E6A23C;
      }

      .unChecked {
        background-color: #FFFFFF;
      }
  }
}
</style>
